<template>
  <section class="registration-form">
	  <el-col :span="24" style="margin:20px 0;">
		  <el-button type="primary" size="medium" @click="toActivityList">返回会议列表</el-button>
	  </el-col>
    <!-- <el-col :span="24" class="action-bar">
			<span class="registration-form-text">签到状态：</span>
      <el-select v-model="signState" clearable placeholder="请选择" style="margin:0 20px;">
        <el-option
          v-for="item in signStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
	  			
			<el-button type="primary" size="medium" @click="search">筛选</el-button>
    </el-col> -->


		<!--列表-->
		
		 <vxe-table
		 		ref="tablea"
				border
				resizable
				row-id="id"
				show-overflow
				height="auto"
				:data.sync="users"
				:edit-config="{trigger: 'click', mode: 'cell',activeMethod: activeRowMethod}"
				@edit-actived="editActivedEvent"
				@edit-disabled="editDisabledEvent"
				@edit-closed="editClosedEvent">
				<vxe-table-column type="index" width="40"></vxe-table-column>
				<vxe-table-column field="real_name" title="名字">
					<template v-slot="{row}">
						<div>
							<span v-if="row.real_name">{{row.real_name}}</span>
							<span v-else>{{row_realName}}</span>
						</div>
					</template>
				</vxe-table-column>
				<vxe-table-column field="hospital_name" title="医院"></vxe-table-column>
				<vxe-table-column field="dep_name" title="科室"></vxe-table-column>
				<vxe-table-column field="station" title="职称"></vxe-table-column>
				<vxe-table-column field="phone" title="性别">
					<template v-slot="{row}">
						<div>
							<span v-show="row.sex==0">女</span>
							<span v-show="row.sex==1">男</span>
						</div>
					</template>
				</vxe-table-column>
				<!-- <vxe-table-column field="phone" title="查看简介">
					<template v-slot="{row}">
						<div>
							<el-button @click="showIntro(row.personal_profile)" type="primary">查看简介</el-button>
						</div>
					</template>
				</vxe-table-column> -->
				<vxe-table-column field="phone" title="电话"></vxe-table-column>
				<vxe-table-column field="wechat" title="微信"></vxe-table-column>
				<vxe-table-column field="cost" title="报名费用"></vxe-table-column>
				<!-- <vxe-table-column field="status" title="签到状态">
					<template v-slot="{row}">
						<div v-show="row.is_sign==0">未签到</div>
						<div v-show="row.is_sign==1">已签到</div>
					</template>
				</vxe-table-column> -->
				<!-- <vxe-table-column field="guest_count" title="陪同客人数"></vxe-table-column> -->
				<!-- <vxe-table-column field="is_cost" title="应收餐费"></vxe-table-column> -->
				<!-- <vxe-table-column field="pay_channel_name" title="缴费方式"></vxe-table-column> -->
				<vxe-table-column field="payment_status" title="缴费状态" width="200px">
					<template v-slot="{row,rowIndex}">
						<div>
							<el-select class="action-bar-input" placeholder="未缴费"  v-model="row.paymentStatus" @change="payStateChange($event,row.id,rowIndex)" v-show="row.payment_status==0">
								<el-option
								v-for="item in payStateOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								>
								</el-option>
							</el-select>
							<div v-show="row.payment_status==1">已缴费</div>
						</div>
					</template>
				</vxe-table-column>
				<!-- <vxe-table-column field="seat_num" title="座位" :edit-render="{name: 'input'}" ></vxe-table-column>
				<vxe-table-column title="操作">
					<template v-slot="{row}">
						<div>
							<vxe-button @click="showDetail(row.id)">查看详情</vxe-button>
						</div>
					</template>
					
				</vxe-table-column> -->
			</vxe-table>
			<el-col :span="24" class="footer-bar">
				<div class="page-code">
					<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
				</div>
			</el-col>
		<!-- 查看详情 -->
    <el-dialog title="查看详情"  :visible.sync="detailVisible" width="450px">
			<el-form  label-position="left" label-width="85px">
				<el-form-item label="名字">
					{{memberDetail.real_name}}
				</el-form-item>
				<el-form-item label="电话">
					{{memberDetail.phone}}
				</el-form-item>
				<el-form-item label="微信">
					{{memberDetail.wechat}}
				</el-form-item>
				<el-form-item label="报名费用">
					{{memberDetail.cost}}
				</el-form-item>
				<el-form-item label="会员级别">
					{{memberDetail.vip_name}}
				</el-form-item>
				<el-form-item label="签到状态">
					<div v-if="memberDetail.is_sign==0">未签到</div>
					<div v-if="memberDetail.is_sign==1">已签到</div>
				</el-form-item>
				<el-form-item label="陪同客人数">
					{{memberDetail.is_with_people}}
				</el-form-item>
				<el-form-item label="应收餐费">
					{{memberDetail.is_cost}}
				</el-form-item>
				<el-form-item label="座位">
					{{memberDetail.seat_num}}
				</el-form-item>
				<el-form-item label="报名时间">
					{{memberDetail.created_at}}
				</el-form-item>
			</el-form>
			<el-col :span="24" style="color: #303133;font-size:18px;margin-bottom: 20px;">
				陪同客人信息
			</el-col>
			<el-table :data="memberDetail.user_activity_guest_list" highlight-current-row class="el-table-style">
				<el-table-column prop="real_name" label="名字" width="100" sortable>
				</el-table-column>
				<el-table-column prop="phone" label="电话" width="150" sortable>
				</el-table-column>
				<el-table-column prop="position" label="职位" width="150" sortable>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click.native="detailVisible = false">确定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="个人简介"  :visible.sync="introDialog" width="600px" @close="intro=''">
			<div>{{intro}}</div>
		</el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			id:'',
			detailVisible: false,//详情是否显示
			signStatus:[{value: '',label: '全部'},{value: 1,label: '已签到'},{value: 0,label: '未签到'}],
			signState: '',
			users:[],
			memberDetail:'',//查看详情内容
			page:1,
			totalPage:0,
			payStateOptions:[
				// {label:'未缴费',value:0},
				{label:'已缴费',value:1}
			],
			intro:'',//个人简介
			introDialog:false
		}
	},
	methods:{
		showIntro(intro){
			this.intro=intro;
			this.introDialog=true;
		},
		async getActivitySignuplist(){
			//获取签到列
			const res=await this.$api.getActivitySignuplist({
				page:this.page,
				isSign:this.signState,
				id:this.id
			})
			if(res.data.level=='success'){
					this.users=res.data.data.user_activity_list;
					this.totalPage=res.data.data.total
				}
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getActivitySignuplist()
		},
		search(){
			//搜索
			this.page=1;
			this.getActivitySignuplist()
		},
		async showDetail(id){
			//查看详情信息
			const res=await this.$api.getActivitySignupDetail({
				id
			})
			if(res.data.level=='success'){
				this.memberDetail=res.data.data.user_activity_info;
				this.detailVisible=true
			}
		},
		editActivedEvent ({ row, column }, event) {
				console.log(`打开 ${column.title} 列编辑`)
			},
		editClosedEvent ({ row, column }, event) {
			this.getActivityUpdateSeatNum(row.id,row.seat_num)
		},
		activeRowMethod({row}){
			return row.is_set_seat!=0
		},
		editDisabledEvent(){
			this.$message({
				type:'error',
				message:'该活动不能设置座位'
			})
		},
		async getActivityUpdateSeatNum(id,seatNum){
			//更新座位
			if(isNaN(seatNum) ||seatNum==null){
				return
			}
			const res=await this.$api.getActivityUpdateSeatNum({
				id,seatNum
			})
			if(res.data.level=='success'){
				this.$message({
					type: 'success',
					message: res.data.message
				});
			}else{
				this.$message({
					type: 'error',
					message: res.data.message
				});
			}
		},
		toActivityList(){
			this.$router.go(-1)
		},
		payStateChange(e,id,index){
			// console.log(e,index)
			if(e==0){
				return
			}
			const _this=this
			const judge= this.$confirm('改变缴费状态？此操作不可逆', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.activityUpdateStatus({id});
					if(res.data.level=='success'){
						this.getActivitySignuplist();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
					this.users[index].paymentStatus=''
					console.log(this.$refs.tablea)
					// this.$refs.tablea.revertData()
			});
		}
	},
	mounted() {
		this.id=this.$route.query.id;
		this.getActivitySignuplist()
	},
}
</script>
<style lang='scss' scoped>
  .registration-form{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
			.registration-form-text{
				color: #666666;
			}
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.registration-form .vxe-table.vxe-editable .vxe-body--column{
		line-height: 48px;
	}

	.registration-form .el-dialog__body{overflow: auto;}


</style>
